import React from 'react';
import { Icon, Table, Dropdown, Menu } from 'antd';
import Zcon from '@cbd/icon';
import styles from './ExpandedRowContent.less';

const getTaskResult = (text) => {
  let res = text;
  switch (text) {
    case 'pass':
      res = (
        <div className={styles.task_pass}>
          <Zcon className={styles.pass_icon} type="tick" />
          <span className={styles.pass_desc}>通过</span>
        </div>
      );
      break;
    case 'unpass':
      res = (
        <div className={styles.task_unpass}>
          <Zcon className={styles.unpass_icon} type="close" />
          <span className={styles.pass_desc}>否决</span>
        </div>
      );
      break;
    default:
      res = text;
  }
  return res;
}

const columnsr = [
  { title: '会签时间', dataIndex: 'taskTime', key: 'taskTime' },
  { title: '会签人', dataIndex: 'assignee', key: 'assignee' },
  {
    title: '会签结果',
    dataIndex: 'taskResult',
    key: 'taskResult',
    render: (text) => {
      return getTaskResult(text);
    },
  },
  { title: '会签意见', dataIndex: 'taskComment', key: 'taskComment' },
];

const menu = (dataArr) => {
  return (
    <Menu>
      {dataArr.map((item, index) => (
        <Menu.Item key={`${item}${index}`}>
          <span>{item}</span>
        </Menu.Item>
      ))}
    </Menu>
  )
};

const getHqTitle = (title, count, userList = []) => {
  if (count > 0) {
    return (
      <Dropdown overlayClassName={styles.item_drop} overlay={menu(userList)} placement="bottomLeft">
        <span className={styles.top_item}>
          <span>{title}</span>
          <span className={styles.top_item_num}>{count}</span>
        </span>
      </Dropdown>
    )
  } else {
    return (
      <span className={styles.top_item}>
        <span>{title}</span>
        <span className={styles.top_item_num}>{count}</span>
      </span>
    )
  }
};

const ExpandedRowContent = ({ record = {} }) => {
  const {
    activeInstances = 0,
    completedInstances = 0,
    instances = 0,
    multiInstances = [],
    activeUserList = [], // 待会签
    completedUserList = [], // 已会签
    assigneeUserList = [], // 总会签
  } = record.multiInstance || {}

  return (
    <div className={styles.exp_content}>
      <div className={styles.exp_top}>
        <span className={styles.top_icon}><Icon type="info-circle" theme="filled" /></span>
        {getHqTitle('已会签', completedInstances, completedUserList)}
        {getHqTitle('待会签', activeInstances, activeUserList)}
        {getHqTitle('总会签', instances, assigneeUserList)}
      </div>
      <div className={styles.item_cons}>
        <Table
          columns={columnsr}
          dataSource={multiInstances}
          rowKey={rec => { return (`${rec.taskTime}-${rec.assignee}${rec.taskResult}`) }}
          size='small'
          pagination={false}
          rowClassName='row_hover_none'
        />
      </div>
    </div>
  );
}
export default ExpandedRowContent;